<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>See Interface v1.0.0</title>
<style type="text/css"> 

body {
color:#333333;
font-family:"Lucida Grande",Tahoma,sans-serif;
font-size:14px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:1.5em;
}

.twoColFixLt #container { 
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixLt #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 10px 15px 20px;
}
.twoColFixLt #mainContent { 
	margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 20px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


.title, .section {
	font-size:20px;
	color:#333333;
	font-family:"Lucida Grande",Tahoma,sans-serif;
}

.section{
	padding:5px;
	border-bottom:1px solid #666;
	}

p {
		font-size:12px;
		color:#666
	
		}

a {
	color:#336699;
	padding:0 1px;
	text-decoration:underline;
	}

ul {
	list-style-type:square;
	}
	
ul ul {
	list-style-type:none;
}

.code {
	background:snow;
	padding:10px;
}

p.code span {
	display:block;
}

.brown{
	font-weight:bold;
	color:brown;
}

.black{
	font-weight:bold;
	color:black;
}
	
	
.red{
	color:red;
}

h2 a{
	color:#333;
	text-decoration:none;
}
	
</style>
</head><body class="twoColFixLt">

<div id="container">
	<div id="sidebar1">
		<h1 class="title">See Admin Interface (v1.0.0)</h1>
		<p>Product documentation</p>
	</div>
	
	<div id="mainContent">
		<p>See Admin Interface is new theme with a beautifull and accesible interface based on Jquery framework to make user inteaction more pleasant.</p>
		<h1 class="title">Contents</h1>
		
		<ul>
			<li>
				<a href="#">Header</a>
				<ul>
					<li><a href="#sec_02">Tabs</a></li>
					<li><a href="#sec_03">Widgets</a></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
		  </li>
			<li>
				<a href="#">Page</a>
				<ul>
					<li></li>
					<li><a href="#sec_01">Dropdown menu</a></li>
					<li><a href="#sec_05">Left menu items</a></li>
                    <li><a href="#sec_06">Left menu SubItems</a></li>
                    <li></li>
                    <li></li>
                    <li></li>
				</ul>
		  </li>			
			
			<li>
				<a href="#">Themes</a>
				<ul>
					<li><a href="#sec_08">Files structure</a></li>
					<li><a href="#sec_07">Creating a new theme</a></li>
					<li><a href="#sec_04">Photoshop template</a></li>
					<li></li>
					<li></li>
				</ul>
		  </li>
			<li><a href="#sec_09">Other resources - icons/fons/scripts</a>
		      <ul>
		        <li></li>
		        <li><a href="#"></a></li>
		        <li></li>
	          </ul>
		    </li>
		</ul>
        
    <br/>
    <h2 class="section"><a name="sec_02">Header - Tabs</a></h2>
    <p>Header tabs are also list items, to add a new tab you can  simply add a list item like so:</p>
    <p><img src="img/2009-12-06_132456.jpg" alt="" width="126" height="84"></p>
    <p>Icons are optional:</p>
    <p><img src="img/2009-12-06_132636.jpg" alt="" width="470" height="94"></p>
    <p>onclick event is showing the tab content in the widget's place...</p>
    <p><img src="img/2009-12-06_132759.jpg" alt="" width="308" height="115"></p>
    <p>The show only function accepts 2 arguments:</p>
    <p><strong>showOnly(tabClass, tabsHodler)</strong></p>
    <p><strong>tabClass </strong>is the class you assign to widget content like "tabDashboard", "tabSettings"</p>
    <p><strong>tabsHoder </strong>in our case is <strong>dashWidget </strong>wich holds all your tab content</p>
    <p>&nbsp;</p>
    
<h2 class="section"><a name="sec_03">Header - widgets</a></h2>
    <p>The
large zone under the tabs is designed to show some kind of graphic,
statistic, or something like that, in the future the upcoming
version of SeeCMS interface will have that functionality implemented as well. Also, there we'll implement an analytics plugin as well for widget...</p>
    <p>&nbsp;</p>
    
<h2 class="section"><a name="sec_01">Page - Dropdown menu</a></h2>
    <p>The page menu is a list, so you can simply add or remove items like so:</p>
    <p><img src="img/2009-12-06_133501.jpg" alt="" width="203" height="98"></p>
    <p>To add a new list item, you can use this code:</p>
    <p><img src="img/2009-12-06_133621.jpg" alt="" width="208" height="48"></p>
    <p>If you want to add a new dropdown list to this element follow this example:</p>
    <p><img src="img/2009-12-06_133920.jpg" alt="" width="321" height="272"></p>
    <p>Your
link element must have the class "sub" so the javascript knows that there is a submenu; the &lt;span&gt; element ads arrow sign <img src="img/2009-12-06_134028.jpg" alt="" width="14" height="14"></p>
    <p>After execution the aformenetioned code creates a new ul type of list like in the image above and adds new li elements to it.</p>

        <h2 class="section"><a name="sec_05">Page - Left menu Items</a></h2>
                <p>The left menu is an UL element, </p>
      <p><img src="img/2009-12-06_010052.jpg" alt="" width="380" height="192"></p>
                <p>To add a new element, just add a new list item, like this:</p>
                <p><img src="img/2009-12-06_010332.jpg" alt="" width="499" height="96"></p>
                <p>The icon for this item is optional, you can also use only the link :</p>
                <p><img src="img/2009-12-06_010508.jpg" alt="" width="334" height="49"></p>
      <p>&nbsp;</p>
<h2 class="section"><a name="sec_06">Page - Left menu SubItems</a></h2>
      <p>With a menu item that contains a submenu the things are a little complicated</p>
      <p><img src="img/2009-12-06_010639.jpg" alt="" width="572" height="129"></p>
      <p>It has two things, first is the current menu element, and two the submenu items, so let's take them one by one...</p>
      <p><img src="img/2009-12-06_010827.jpg" alt="" width="540" height="77"></p>
      <p>The current menu item has an icon, a title and that span represents the section state, expanded or contracted <img src="img/2009-12-06_011017.jpg" alt="" width="20" height="20"> <img src="img/2009-12-06_011003.jpg" alt="" width="20" height="20"></p>
      <p>After that in the same &lt;li&gt; element we must add the sub elements .in a new &lt;ol&gt; element</p>
      <p><img src="img/2009-12-06_011146.jpg" alt="" width="266" height="128"></p>
      <p>If
you want a sub item to be visibile in the first place without extending
the submenu, just add the pin class to it's &lt;li&gt; element, not
let's see in detail a sub element :</p>
      <p><img src="img/2009-12-06_011407.jpg" alt="" width="526" height="140"></p>
      <p>The icon is optional, the span element represents the pin you see when you're hovering a submenu item...</p>
      <p>if you want a menu item, to be by default expanded you just add the class "expanded", like this :</p>
      <p><img src="img/2009-12-06_011802.jpg" alt="" width="250" height="127"></p>
      <p>&nbsp;</p>
      
<h2 class="section"><a name="sec_08">Themes - File structure</a></h2>
		<p>Let's create a new theme sample to understand exactly what you need to do, first of all this is the file structure:</p>
		<p class="code">
			<span class="black">Image files:</span>
			<span><b>/img/dash/</b>        - dashboard icons (6 icons top right)</span>
			<span><b>/img/icons/</b>        - generaly used for page left menu</span>
			<span><b>/img/table/</b>        - used for table component</span>
			<span><b>/img/th_blue/</b>       - blue theme files</span>
			<span><b>/img/th_red/</b>       - red theme files</span>
			<span><b>/img/th_green/</b>       - green theme files</span>
			<span><b>/img/th_brown/</b>       - brown theme files</span>
		</p>
		
		<p class="code">
			<span class="black">Css files:</span>
			<span><b>/css/reset.css</b>         - Resets all the elements style</span>
			<span><b>/css/extra.css</b>        - ads rounded cornes to some elements, comment this file on header to enshure css validation</span>
			<span><b>/css/blue.css</b>      - blue theme styles</span>
			<span><b>/css/red.css</b>       - red theme styles</span>
			<span><b>/css/green.css</b>     - green theme styles</span>
			<span><b>/css/brown.css</b>     - green theme styles</span>
		</p>		
		
		<p class="code">
			<span class="black">Javascript files:</span>
			<span><b>/js/ddbelatedpng.js</b>         - used for IE6 png transparency support<span>
			<span><b>/js/jquery.wysiwyg.js</b>        - used for WYSIWYG Editor (What You See Is What You Get)</span>
			<span><b>/js/stylesheetToggle.js</b>        - used for changing the theme whithout page reload</span>
			<span><b>/js/tinytable.js</b>      - Ads client side sort option to tables without any server side implementation</span>
		</span></span></p>
      
<h2 class="section"><a name="sec_07">Themes - Creating a new theme</a></h2>
		<p>See
Interface comes with 4 themes, if you want to create a new theme you
can open the psd file and save slices in your new theme or current
theme folder.</p>
		<p>First of all, a new theme requires a new css
file and also a new image folder in /img/, I recommend for future themes to follow the same folder structure or file naming for simple
and fast work.</p>
		<br>
		<p>Let's create a new theme sample to understand exactly what you need to do, first of all this is the file structure:</p>
		
		<p class="code">
			<span class="black">Image files:</span>
			<span class="brown"><b>/img/th_{COLOR}/</b>       - as a naming convention you can use {COLOR} as a name for the image folder</span>
		</p>
		
		<p class="code">
			<span class="black">Css files:</span>
			<span><b>/css/red.css</b>       - red theme files</span>
			<span><b>/css/green.css/</b>     - green theme files</span>
			<span class="brown"><b>/css/{COLOR}.css/</b>       - as a naming convention you can use {COLOR} as a name for the stylesheet</span>
		</p>		
		
		<p class="black">Now that you have an ideea about how files must be saved, open the photoshop file, more things about layers groups here.</p>
		<p>After
you change the design, you already have slices on place, all you need
to do is go to File-&gt;Save for Web &amp; Devices, select all your
slices and save them in /img/th_{color}/</p>
		<p>The table head
background and selected head background are stored in
/img/th_{color}/table/, the files are : header-bg.gif,
header-selected-bg.gif</p>
		<p>After you moved the theme images in
the right place, create a copy of blue.css file in your /css/ folder,
and make changes according your new color.</p>
		<p>If you use theme changer, you must ad the new theme css file to index header, like this :
			</p><p class="code">
				<span>&lt;link rel="alternate stylesheet" title="blue" type="text/css" media="all" href="css/blue.css" /&gt;</span>
				<span>&lt;link rel="alternate stylesheet" title="<b>{COLOR}</b>" type="text/css" media="all" href="css/<b>{COLOR}.css</b>" /&gt;</span>
			</p>
		
<h2 class="section"><a name="sec_04">Photoshop template</a></h2>
		<p>In the template you have the layers groupped like this:</p>
		<p><img src="img/2009-12-06_014651.jpg" alt="" width="333" height="601"></p>
		<p>You
can simply show/hide groups to understand what's where, also, the
slices are in place so after you've changed colors or changed the style
you can simply save the slices, that's why I dont recommend to move
them...</p>
		<p>The only font not existent in windows default installation is<a href="http://www.fontsquirrel.com/fonts/Aurulent-Sans"> Aurulent Sans</a>,font free to use on commercial purposes also.</p>
        
		<h2 class="section"><a name="sec_09">Other resources - Icons/Fonts/Images/Scripts</a></h2>
		<p>The icons used in this product are free for personal or comercial use:
		</p><ul>
			<li><a href="http://www.pinvoke.com/">Fungue Icons</a></li>
			<li><a href="http://www.webiconset.com/application-icon-set/">Application Iconset</a></li>
		</ul>
		
			I would also suggest using a 16x16 pixels for menu icons and 48x48 for header fast functions (6 icons)
		
		<br>
		<p>To
cause less problems, all the fonts used in the interface are Arial,
Tahoma and Trebuchet MS, only the logo uses a different font, you can download it
for free and use it to brand your future admin. </p><ul>
			<li><a href="http://www.fontsquirrel.com/fonts/Aurulent-Sans">Aurulent Sans</a></li>
		</ul>
		<p>About
the javascript library, all the javascript uses Jquery, i've included
jquery library directly from google code so you dont need to carry it.</p>
		<p>Other javascript files :</p>
		<ul>
		  <li><a href="http://www.kelvinluck.com/">Stylesheet toggle (Kelvin Luck)</a> - Toggle css styles</li>
		  <li><a href="http://plugins.jquery.com/project/jWYSIWYG">WYSIWYG (Juan M Martinez)</a> - Richtext editor</li>
		  <li><a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/">DD_belatedPNG (Drew Diller)</a> - Png support for Ie6</li>
		  <li><a href="http://www.leigeber.com/">TinyTable (  Michael Leigeber  )</a> - Client side table sorter</li>
      </ul>
        <p></p>
        <p>&nbsp;</p>
		
		
		
	</div>
</div>

</body></html>